<template>
  <xr-create
    :loading="loading"
    :title="dialogTitle"
    @close="handleClose"
    @save="dialogSubmit"
    width="368px"
  >
    <el-form
      ref="dialogRef"
      :model="poolForm"
      :rules="poolRules"
      class="new-dialog-form"
      label-width="80px"
      label-position="top"
    >
      <el-form-item label="账单池名称" prop="poolName" v-if="type == 1">
        <el-input v-model="poolForm.poolName" clearable></el-input>
      </el-form-item>
      <el-form-item label="名称" prop="studentPoolName" v-if="type == 2">
        <el-input v-model="poolForm.studentPoolName" clearable></el-input>
      </el-form-item>
      <!-- 人员选择器  -->
      <el-form-item label="所属管理员" prop="adminUserId" style="width: 100%">
        <UserSelect
          v-model="poolForm.adminUserId"
          @input="userChange"
          style="width: 100%"
        ></UserSelect>
      </el-form-item>
      <el-form-item label="所属部门" prop="memberDeptId">
        <manageDep
          @submitDeps="submitDeps"
          ref="manage_dep"
          :manageDeptId="memberDeptId"
          :manageDeptName="memberDeptName"
        ></manageDep>
      </el-form-item>
      <!-- 角色 -->
      <el-form-item label="分配权限" prop="memberUserId">
        <UserEmployeeSelect
          v-model="poolForm.memberUserId"
          multiple
          style="width: 100%"
        ></UserEmployeeSelect>
      </el-form-item>

      <div class="rule_tips">
        <p>规则说明：</p>
        <p>
          1、领取{{
            type == 2 ? "学员" : "账单"
          }}时，需要输入正确的手机号，验证通过才可领取成功。
        </p>

        <p>
          2、每个{{
            type == 2 ? "学员" : "账单"
          }}只能被领取一次，不能重复多次领取。
        </p>
      </div>
    </el-form>
  </xr-create>
</template>
<script>
// 修改账单池 || 修改vip池
import XrCreate from "@/components/XrCreate";
import manageDep from "./manageDep"; //部门选择器
import UserEmployeeSelect from "../crm/components/UserEmployeeSelect"; //角色选择器
import { vipStuConfigUpdate } from "@/api/admin/vipStuConfig.js";
import { poolUpdate } from "@/api/admin/accountPool.js";
import UserSelect from "./UserSelect"; //人员选择器-单选

export default {
  model: {
    prop: "poolForm",
    event: "change",
  },
  components: {
    XrCreate,
    manageDep,
    UserEmployeeSelect,
    UserSelect,
  },
  /**
   *
   * type = 1=>账单池
   * type = 2=>vip池
   *
   */
  props: [
    "dialogTitle",
    "loading",
    "poolForm",
    "type",
    "memberDeptId",
    "memberDeptName",
  ],
  data() {
    return {
      poolRules: {
        studentPoolName: [
          {
            required: true,
            trigger: "blur",
            message: "名称不能为空",
          },
        ],
        poolName: [
          {
            required: true,
            trigger: "blur",
            message: "账单池名称不能为空",
          },
        ],
        memberDeptId: [
          {
            required: true,
            trigger: "blur",
            message: "部门不能为空",
          },
        ],
        adminUserId: [
          {
            required: true,
            trigger: "blur",
            message: "所属管理员不能为空",
          },
        ],
        memberUserId: [
          {
            required: true,
            trigger: "blur",
            message: "分配权限不能为空",
          },
        ],
      },
      relateEmpoyeeShow: false,
    };
  },
  methods: {
    // 弹框 - 取消
    handleClose() {
      this.$refs.dialogRef.resetFields();
      this.$emit("handleClose");
    },
    // 弹框 - 确定
    dialogSubmit() {
      console.log(this.poolForm);
      this.$refs.dialogRef.validate((valid) => {
        if (valid) {
          let subData = {
            adminUserId: this.poolForm.adminUserId,
            memberUserId: JSON.parse(
              JSON.stringify(this.poolForm.memberUserId)
            ).join(","),
            memberDeptId: this.poolForm.memberDeptId,
          };
          let api;
          if (this.type == 1) {
            //账单池
            api = poolUpdate;
            subData.orderPoolId = this.poolForm.orderPoolId;
            subData.poolName = this.poolForm.poolName;
          } else {
            //vip池
            api = vipStuConfigUpdate;
            subData.studentPoolId = this.poolForm.studentPoolId;
            subData.studentPoolName = this.poolForm.studentPoolName;
          }
          api(subData).then((res) => {
            if (res.code == 0) {
              this.$message.success(res.msg);
              this.$emit("dialogSubmit");
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    // 提交部门
    submitDeps(e) {
      this.$set(this.poolForm, "memberDeptId", e);
    },
    userChange(data) {
      this.poolForm.adminUserId = data;
    },
  },
};
</script>
<style scoped lang="scss">
.new-dialog-form {
  padding: 0 10px;
  .rule_tips {
    font-size: 12px;
    color: #666666;
    line-height: 20px;
  }
  /deep/ .el-form-item__label {
    line-height: 14px;
  }
}
</style>